<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            main {
                position: relative;
                width: 100%;
                height: 100vh;
                overflow: hidden;
            }
            main video {
                width: 100%;
            }
            /* 定义遮罩层 */
            .cover {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #000;
                transform: scale(20);
                mix-blend-mode: multiply;
            }
            /* 制作X，通过双伪类制作两盒子，再让其倾斜45度便可 */
            .cover::before {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                width: 80px;
                height: 300px;
                transform: translate(-50%, -50%) skew(45deg);
                background-color: #fff;
            }
            .cover::after {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                width: 80px;
                height: 300px;
                transform: translate(-50%, -50%) skew(-45deg);/* skew（45deg）倾斜45度 */
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <!-- main是底层盒子，video是背景视频，.cover是X -->
        <main>
            <video src="11.mp4" autoplay loop muted></video>
            <div class="cover"></div>
        </main>

        <script>
            let cover = document.querySelector('.cover');
            let scale = 20;

            let bian = setInterval(function () {
                scale = scale - 0.05;

                cover.style.cssText = `transform: scale(${scale});`;

                if (scale <= 1) {
                    clearInterval(bian);
                }
            }, 20);
        </script>
    </body>
</html>
